<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>项目事务管理系统</title>

    <!-- Bootstrap core CSS -->
    <link href="__PUBLIC__/css/bootstrap.css" rel="stylesheet">
    <!--    external css-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/zabuto_calendar.css">
    <link href="__PUBLIC__/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/js/gritter/css/jquery.gritter.css"/>
    <!-- Custom styles for this template -->
    <link href="__PUBLIC__/css/style.css" rel="stylesheet">
    <link href="__PUBLIC__/css/index.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style-responsive.css" rel="stylesheet">

    <script src="__PUBLIC__/js/chart-master/Chart.js"></script>


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .mb_w{
            width: 25% !important;
        }
        .details{
            width: auto !important;
        }
        .border-head h3 {
            padding-bottom: 0;
        }
        .ds h3 {
            line-height: 3.5em !important;
            height: 3.5em !important;
        }
    </style>
</head>

<body>

<section id="container">
<!-- **********************************************************************************************************************************************************
TOP BAR CONTENT & NOTIFICATIONS
*********************************************************************************************************************************************************** -->
<!--header start-->
<header class="header black-bg">
    <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right" data-original-title="收缩侧边栏">
            <i class="fa "></i>
        </div>
    </div>
    <!--logo start-->
    <a href="index.html" class="logo"><b>项目事务管理系统</b></a>
    <!--logo end-->
    <div class="nav notify-row" id="top_menu">
        <!--  notification start -->
        <ul class="nav top-menu">
            <!-- settings start -->

            <!--提醒内容开始-->
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                    <i class="fa "><span class="glyphicon glyphicon glyphicon-envelope"></span></i>
                    <span class="badge bg-theme">4</span>
                </a>
                <ul class="dropdown-menu extended tasks-bar">
                    <div class="notify-arrow notify-arrow-green"></div>
                    <li>
                        <p class="green">You have 4 pending tasks</p>
                    </li>
                    <li>
                        <a href="index.html#">
                            <div class="task-info">
                                <div class="desc">DashGum Admin Panel</div>
                                <div class="percent">40%</div>
                            </div>
                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                    <span class="sr-only">40% Complete (success)</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#">
                            <div class="task-info">
                                <div class="desc">Database Update</div>
                                <div class="percent">60%</div>
                            </div>
                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <span class="sr-only">60% Complete (warning)</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#">
                            <div class="task-info">
                                <div class="desc">Product Development</div>
                                <div class="percent">80%</div>
                            </div>
                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                    <span class="sr-only">80% Complete</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#">
                            <div class="task-info">
                                <div class="desc">Payments Sent</div>
                                <div class="percent">70%</div>
                            </div>
                            <div class="progress progress-striped">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
                                     aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                                    <span class="sr-only">70% Complete (Important)</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="external">
                        <a href="#">See All Tasks</a>
                    </li>
                </ul>
            </li>
            <!--提醒内容结束-->

            <!-- settings end -->
            <!-- inbox dropdown start-->
            <!--邀请同事开始-->
            <li id="header_inbox_bar" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                    <i class="fa"><span class="glyphicon glyphicon-user"></span></i>
                    <span class="badge bg-theme">5</span>
                </a>
                <ul class="dropdown-menu extended inbox">
                    <div class="notify-arrow notify-arrow-green"></div>
                    <li>
                        <p class="green">You have 5 new messages</p>
                    </li>
                    <li>
                        <a href="index.html#">
                            <span class="photo"><img alt="avatar" src="__PUBLIC__/img/ui-zac.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Zac Snider</span>
                                    <span class="time">Just now</span>
                                    </span>
                                    <span class="message">
                                        Hi mate, how is everything?
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#">
                            <span class="photo"><img alt="avatar" src="__PUBLIC__/img/ui-divya.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Divya Manian</span>
                                    <span class="time">40 mins.</span>
                                    </span>
                                    <span class="message">
                                     Hi, I need your help with this.
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#">
                            <span class="photo"><img alt="avatar" src="__PUBLIC__/img/ui-danro.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Dan Rogers</span>
                                    <span class="time">2 hrs.</span>
                                    </span>
                                    <span class="message">
                                        Love your new Dashboard.
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#">
                            <span class="photo"><img alt="avatar" src="__PUBLIC__/img/ui-sherman.jpg"></span>
                                    <span class="subject">
                                    <span class="from">Dj Sherman</span>
                                    <span class="time">4 hrs.</span>
                                    </span>
                                    <span class="message">
                                        Please, answer asap.
                                    </span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#">See all messages</a>
                    </li>
                </ul>
            </li>
            <!--邀请同事结束-->

            <!--设置开始-->
            <li>
                <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                    <i class="fa"><span class="glyphicon glyphicon-cog"></span></i>
                </a>
            </li>
            <!--设置结束-->

            <!--签到开始-->
            <!-- Button trigger modal -->
            <li style="margin-top: 10px">
                <span data-toggle="modal" data-target="#myModal"><a>签到</a></span>
            </li>
            <!--签到结束-->
            <!-- inbox dropdown end -->
        </ul>
        <!--  notification end -->
    </div>
    <div class="top-menu">
        <ul class="nav pull-right top-menu">
            <li><a class="logout">退出系统</a></li>
        </ul>
    </div>

</header>
<!--header end-->
<!-- Modal  签到弹出框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">消息</h4>
            </div>
            <div class="modal-body">
                签到成功，您的签到时间为...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal  结束 -->

<!-- **********************************************************************************************************************************************************
MAIN SIDEBAR MENU
*********************************************************************************************************************************************************** -->
<!--sidebar start-->
<aside>
    <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">

            <p class="centered"><a href="profile.html"><img src="__PUBLIC__/img/ui-sam.jpg" class="img-circle"
                                                            width="60"></a></p>
            <h5 class="centered">Shi Niang</h5>

            <li class="mt">
                <a class="active" href="{:U('Index/index')}">
                    <i class="fa fa-dashboard"></i>
                    <span>首页</span>
                </a>
            </li>

            <li class="sub-menu">
                <a href="javascript:;">
                    <i class="fa fa-desktop"></i>
                    <span>日报</span>
                </a>
                <ul class="sub">
                    <li><a href="{:U('Date/index')}">我的日报</a></li>
                    <li><a>他人日报</a></li>
                    <li><a>评论我的</a></li>
                    <li><a>回复我的</a></li>
                </ul>
            </li>

            <li class="sub-menu">
                <a href="javascript:;">
                    <i class="fa fa-cogs"></i>
                    <span>日历</span>
                </a>
                <ul class="sub">
                    <li><a  href="index.html">我的日历</a>
                    </li>
                    <li><a>他人日历</a></li>
                </ul>
            </li>
            <li class="sub-menu">
                <a href="javascript:;">
                    <i class="fa fa-book"></i>
                    <span>目标</span>
                </a>
                <ul class="sub">
                    <li><a>我的目标</a>
                        <ul class="sub">
                            <li><a href="index.html">·负责的目标</a></li>
                            <li><a>·创建的目标</a></li>
                            <li><a>·参与的目标</a></li>
                        </ul>
                    </li>
                    <li><a>未读的目标</a></li>
                    <li><a>新反馈的目标</a></li>
                    <li><a>下属目标</a></li>
                    <li><a>已完成目标</a></li>
                </ul>
            </li>
            <li class="sub-menu">
                <a href="javascript:;">
                    <i class="fa fa fa-envelope-o"></i>
                    <span>文档</span>
                </a>
                <ul class="sub">
                    <li><a>我负责的文档</a></li>
                </ul>
            </li>
            <li class="sub-menu">
                <a href="javascript:;">
                    <i class="fa fa-th"></i>
                    <span>客户管理</span>
                </a>
                <ul class="sub">
                    <li><a>我的客户</a></li>
                    <li><a>。。。。</a></li>
                </ul>
            </li>
            <li class="sub-menu">
                <a href="javascript:;">
                    <i class=" fa fa-tasks"></i>
                    <span>文档库</span>
                </a>
                <ul class="sub">
                    <li><a>我的文档</a></li>
                    <li><a>...</a></li>
                </ul>
            </li>
            <li class="sub-menu">
                <a href="javascript:;">
                    <i class=" fa fa-bar-chart-o"></i>
                    <span>考勤</span>
                </a>
            </li>

        </ul>
        <!-- sidebar menu end-->
    </div>
</aside>
<!--sidebar end-->

<!-- **********************************************************************************************************************************************************
MAIN CONTENT
*********************************************************************************************************************************************************** -->
<!--main content start-->
<section id="main-content">
<section class="wrapper">

<div class="row">
<div class="col-lg-9 main-chart" style="width: 70%">

    <!-- /row mt -->
    <div class="border-head">
        <h3 style="margin-top: .3em;margin-bottom: .3em">我的目标</h3>
        <!--       <div class="line"></div>-->
    </div>

    <div class="row mt" style="margin-top: .4em">
        <!-- SERVER STATUS PANELS -->
        <div class="col-md-4 col-sm-4 mb mb_w">
            <div class="white-panel pn donut-chart">
                <div class="white-header">
                    <h5>目标1</h5>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-xs-6 goleft">
                        <p><i class="fa fa-database"></i> 70%</p>
                    </div>
                </div>
                <canvas id="serverstatus01" height="100" width="100"></canvas>
                <script>
                    var doughnutData = [
                        {
                            value: 70,
                            color: "#68dff0"
                        },
                        {
                            value: 30,
                            color: "#fdfdfd"
                        }
                    ];
                    var myDoughnut = new Chart(document.getElementById("serverstatus01").getContext("2d")).Doughnut(doughnutData);
                </script>
            </div>
            <! --/grey-panel -->
        </div>
        <!-- /col-md-4-->
        <div class="col-md-4 col-sm-4 mb mb_w">
            <div class="white-panel pn donut-chart">
                <div class="white-header">
                    <h5>目标3</h5>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-xs-6 goleft">
                        <p><i class="fa fa-database"></i> 70%</p>
                    </div>
                </div>
                <canvas id="serverstatus02" height="100" width="100"></canvas>
                <script>
                    var doughnutData = [
                        {
                            value: 70,
                            color: "#68dff0"
                        },
                        {
                            value: 30,
                            color: "#fdfdfd"
                        }
                    ];
                    var myDoughnut = new Chart(document.getElementById("serverstatus02").getContext("2d")).Doughnut(doughnutData);
                </script>
            </div>
            <! --/grey-panel -->
        </div>
        <!-- /col-md-4-->
        <div class="col-md-4 col-sm-4 mb mb_w">
            <div class="white-panel pn donut-chart">
                <div class="white-header">
                    <h5>目标2</h5>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-xs-6 goleft">
                        <p><i class="fa fa-database"></i> 70%</p>
                    </div>
                </div>
                <canvas id="serverstatus03" height="100" width="100"></canvas>
                <script>
                    var doughnutData = [
                        {
                            value: 70,
                            color: "#68dff0"
                        },
                        {
                            value: 30,
                            color: "#fdfdfd"
                        }
                    ];
                    var myDoughnut = new Chart(document.getElementById("serverstatus03").getContext("2d")).Doughnut(doughnutData);
                </script>
            </div>
            <! --/grey-panel -->
        </div>
        <!-- /col-md-4-->

        <div class="col-md-4 col-sm-4 mb mb_w">
            <div class="white-panel pn donut-chart">
                <div class="white-header">
                    <h5>目标4</h5>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-xs-6 goleft">
                        <p><i class="fa fa-database"></i> 70%</p>
                    </div>
                </div>
                <canvas id="serverstatus04" height="100" width="100"></canvas>
                <script>
                    var doughnutData = [
                        {
                            value: 70,
                            color: "#68dff0"
                        },
                        {
                            value: 30,
                            color: "#fdfdfd"
                        }
                    ];
                    var myDoughnut = new Chart(document.getElementById("serverstatus04").getContext("2d")).Doughnut(doughnutData);
                </script>
            </div>
            <! --/grey-panel -->
        </div>
        <!-- /col-md-4-->

    </div>
    <!-- /row -->


    <div class="row mt">
        <!--CUSTOM CHART START -->
        <div class="border-head">
            <h3>考勤统计（签到人数/签到日期）</h3>
        </div>
        <div class="custom-bar-chart">
            <ul class="y-axis">
                <li><span>10.000</span></li>
                <li><span>8.000</span></li>
                <li><span>6.000</span></li>
                <li><span>4.000</span></li>
                <li><span>2.000</span></li>
                <li><span>0</span></li>
            </ul>
            <div class="bar">
                <div class="title">JAN</div>
                <div class="value tooltips" data-original-title="8.500" data-toggle="tooltip" data-placement="top">85%</div>
            </div>
            <div class="bar ">
                <div class="title">FEB</div>
                <div class="value tooltips" data-original-title="5.000" data-toggle="tooltip" data-placement="top">50%</div>
            </div>
            <div class="bar ">
                <div class="title">MAR</div>
                <div class="value tooltips" data-original-title="6.000" data-toggle="tooltip" data-placement="top">60%</div>
            </div>
            <div class="bar ">
                <div class="title">APR</div>
                <div class="value tooltips" data-original-title="4.500" data-toggle="tooltip" data-placement="top">45%</div>
            </div>
            <div class="bar">
                <div class="title">MAY</div>
                <div class="value tooltips" data-original-title="3.200" data-toggle="tooltip" data-placement="top">32%</div>
            </div>
            <div class="bar ">
                <div class="title">JUN</div>
                <div class="value tooltips" data-original-title="6.200" data-toggle="tooltip" data-placement="top">62%</div>
            </div>
            <div class="bar">
                <div class="title">JUL</div>
                <div class="value tooltips" data-original-title="7.500" data-toggle="tooltip" data-placement="top">75%</div>
            </div>
        </div>
        <!--custom chart end-->
    </div>
    <!-- /row -->

</div>
<!-- /col-lg-9 END SECTION MIDDLE -->


<!-- **********************************************************************************************************************************************************
RIGHT SIDEBAR CONTENT
*********************************************************************************************************************************************************** -->

<div class="col-lg-3 ds" style="width: 30%">
    <!--COMPLETED ACTIONS DONUTS CHART-->
    <h3>未完成任务</h3>

    <!-- First Action -->
    <div class="desc">
        <div class="thumb">
            <span class="badge bg-theme">
                <span class="glyphicon glyphicon-heart"></span>
            </span>
        </div>
        <div class="details">
            <p>
                <muted>任务一</muted>
            </p>
            <p>任务详情拉上发挥的水果块话费的</p>
            <p>参与者:<a href="#">James Brown</a></p>
            <p>到期日:<a href="#">2015-01-26</a></p>
        </div>
    </div>
    <!-- Second Action -->
    <div class="desc">
        <div class="thumb">
            <span class="badge bg-theme">
                <span class="glyphicon glyphicon-heart"></span>
            </span>
        </div>
        <div class="details">
            <p>
                <muted>任务二</muted>
            </p>
            <p>任务详情拉上发挥的水果块话费的</p>
            <p>参与者:<a href="#">James Brown</a></p>
            <p>到期日:<a href="#">2015-01-26</a></p>
        </div>
    </div>


    <!-- USERS ONLINE SECTION -->
    <h3>未读日报</h3>
    <!-- First Member -->
    <div class="desc">
        <div class="thumb">
            <img class="img-circle" src="__PUBLIC__/img/ui-divya.jpg" width="35px" height="35px" align="">
        </div>
        <div class="details">
            <p><a href="#">DIVYA MANIAN</a><br/>
                <muted>Available</muted>
            </p>
        </div>
    </div>
    <!-- Second Member -->
    <div class="desc">
        <div class="thumb">
            <img class="img-circle" src="__PUBLIC__/img/ui-sherman.jpg" width="35px" height="35px" align="">
        </div>
        <div class="details">
            <p><a href="#">DJ SHERMAN</a><br/>
                <muted>I am Busy</muted>
            </p>
        </div>
    </div>
    <!-- Third Member -->
    <div class="desc">
        <div class="thumb">
            <img class="img-circle" src="__PUBLIC__/img/ui-danro.jpg" width="35px" height="35px" align="">
        </div>
        <div class="details">
            <p><a href="#">DAN ROGERS</a><br/>
                <muted>Available</muted>
            </p>
        </div>
    </div>


    <!-- CALENDAR-->
    <div id="calendar" class="mb">
        <div class="panel green-panel no-margin">
            <div class="panel-body">
                <div id="date-popover" class="popover top"
                     style="cursor: pointer; disadding: block; margin-left: 33%; margin-top: -50px; width: 175px;">
                    <div class="arrow"></div>
                    <h3 class="popover-title" style="disadding: none;"></h3>

                    <div id="date-popover-content" class="popover-content"></div>
                </div>
                <div id="my-calendar"></div>
            </div>
        </div>
    </div>
    <!-- / calendar -->

</div>
<!-- /col-lg-3 -->
</div>
<! --/row -->
</section>
</section>

<!--main content end-->
<!--footer start-->
<footer class="site-footer">
    <div class="text-center">
        2014 - Alvarez.is
        <a href="index.html#" class="go-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>
</footer>
<!--footer end-->
</section>

<!-- js placed at the end of the document so the pages load faster -->
<script src="__PUBLIC__/js/jquery.js"></script>
<script src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
<script src="__PUBLIC__/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="__PUBLIC__/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="__PUBLIC__/js/jquery.scrollTo.min.js"></script>

<script src="__PUBLIC__/js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/jquery.sparkline.js"></script>


<!--common script for all pages-->
<script src="__PUBLIC__/js/common-scripts.js"></script>

<script type="text/javascript" src="__PUBLIC__/js/gritter/js/jquery.gritter.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/gritter-conf.js"></script>

<!--script for this page-->
<script src="__PUBLIC__/js/sparkline-chart.js"></script>
<script src="__PUBLIC__/js/zabuto_calendar.js"></script>


<!--欢迎登陆弹出框开始-->
<script type="text/javascript">
    $(document).ready(function () {
        var unique_id = $.gritter.add({
            // (string | mandatory) the heading of the notification
            title: '欢迎登陆项目事务管理系统！',
            // (string | mandatory) the text inside the notification
            text: '新的一天新的开始，请记得签到保持您的考勤完整性<a>考勤</a>',
            // (string | optional) the image to display on the left
            image: '__PUBLIC__/img/ui-sam.jpg',
            // (bool | optional) if you want it to fade out on its own or just sit there
            sticky: true,
            // (int | optional) the time you want it to be alive for before fading out
            time: '',
            // (string | optional) the class name you want to apply to that specific message
            class_name: 'my-sticky-class'
        });

        return false;
    });
</script>
<!--欢迎登陆弹出框开始结束-->

/*日历*/
<script type="application/javascript">
    $(document).ready(function () {
        $("#date-popover").popover({html: true, trigger: "manual"});
        $("#date-popover").hide();
        $("#date-popover").click(function (e) {
            $(this).hide();
        });

        $("#my-calendar").zabuto_calendar({
            action: function () {
                return myDateFunction(this.id, false);
            },
            action_nav: function () {
                return myNavFunction(this.id);
            },
            ajax: {
                url: "show_data.php?action=1",
                modal: true
            },
            legend: [
                {type: "text", label: "Special event", badge: "00"},
                {type: "block", label: "Regular event", }
            ]
        });
    });


    function myNavFunction(id) {
        $("#date-popover").hide();
        var nav = $("#" + id).data("navigation");
        var to = $("#" + id).data("to");
        console.log('nav ' + nav + ' to: ' + to.month + '/' + to.year);
    }
</script>


</body>
</html>
